import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
    TopicWapper,
    TopicItem,
    TopicItemName
} from '../style.js'
class Topic extends Component {
    render () {
        return (
            <TopicWapper>
                {
                    this.props.topicList.map((item) => {
                        return (
                            <TopicItem key={item.get('id')}>
                                <img className="TopicItemImg" src={item.get('imgUrl')} alt="" />
                                <TopicItemName>{item.get('title')}</TopicItemName>
                            </TopicItem>
                        )
                    })
                }
            </TopicWapper>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        topicList: state.getIn(['home','topicList']),
        header: state.getIn(['header','list'])
    }
}
export default connect(mapStateToProps, null)(Topic)